$(document).ready(function(){
	var modal = new Modal($('.modal'));
	modal.show('user');
	modal.modal('show');

	modal.attach('#choose a','click',function(e){
		e.preventDefault();
		$(this).tab('show');
	});
	modal.attach('.user .btn.submit','click',function(){
		modal.modal('hide');
		setTimeout(function(){
			modal.show('tech');
			modal.modal('show');
		},1000);
	});
	modal.attach('.tech .btn.submit','click',function(){
		window.location = 'html1.html';
	});
});
/*
 * Modal class Control modal show different apparences
 * set 'default' as class name to show that apparence as default
 * @param modal DOM modal instance need to change apparences
 */
function Modal(modal){
	var self = this;

	self.dialog = modal;
	self.current = undefined;
	
	self.modal = function(option){
		self.dialog.modal(option);
	}
	self.show = function(className){
		//hide current apparence
		self.current && $('.'+self.current,self.dialog).css('display','none');
		//show new apparence
		$('.'+className,self.dialog).css('display','block');
		//reset current
		self.current = className;
	};

	//attach additional event listener
	self.attach = function(selector,eventType,handler){
		$(selector,self.dialog).bind(eventType,handler);
	};
}
